<!DOCTYPE html>
<html>
<head>
    <title>新增远程模型服务</title>
    <link rel="stylesheet" href="/css/jquery.stepy.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/blueimp-gallery.min.css">

    <!--file upload-->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-fileupload.min.css" />

    <%- include headInclude.ejs %>
</head>
<body class="sticky-header">
<section>
    <!-- 左导航栏 -->
    <%- include header.ejs %>
    <div class="main-content">
        <!-- 上导航栏 -->
        <%- include nav.ejs %>

        <div class="panel panel-default" style="background: #EFF0F4;">
            <div class="panel-body">
                <h3 >部署模型服务至<%=host %></h3> <br>
                <div class="box-widget">
                    <div class="widget-head clearfix">
                        <div id="top_tabby" class="block-tabby pull-left"></div>
                    </div>
                    <div class="widget-container">
                        <div class="widget-block">
                            <div class="widget-content box-padding">
                                <form id="stepy_form" class="form-horizontal left-align form-well" action="/modelser" method="post" enctype="multipart/form-data" >
                                    <fieldset title="步骤 1">
                                        <legend>上传者信息</legend>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">上传人</label>
                                            <div class="col-md-6 col-sm-6">
                                                <input name="u_name" class="form-control" placeholder="admin" id="u_name" type="text"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">邮箱</label>
                                            <div class="col-md-6 col-sm-6">
                                                <input name="u_email" class="form-control" id="u_email" type="email" data-error="邮箱格式不正确!" />
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset title="步骤 2">
                                        <legend>模型信息</legend>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">模型名称</label>
                                            <div class="col-md-6 col-sm-6">
                                                <input name="m_name" type="text" id="m_name" name="m_name" placeholder="GeoModel" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">模型类型</label>
                                            <div class="col-md-6 col-sm-6">
                                                <input name="m_type" type="text" id="m_type" name="m_type" placeholder="Geo" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">模型权限</label>
                                            <div class="col-md-6 col-sm-6">
                                                <select id="ms_limited" name="ms_limited" class="form-control">
                                                    <option value="0" selected="">公开</option>
                                                    <option value="1">私有</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">详细信息地址</label>
                                            <div class="col-md-6 col-sm-6">
                                                <input name="m_url" type="url" id="m_url" name="m_url"  class="form-control">
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset title="步骤 3">
                                        <legend>模型服务信息</legend>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">版本</label>
                                            <div class="col-md-6 col-sm-6">
                                                <input name="mv_num" type="text" id="mv_num" name="mv_num" placeholder="0" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">参数</label>
                                            <div class="col-md-6 col-sm-6">
                                                <input name="ms_xml" type="text" id="ms_xml" name="ms_xml" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">模型服务描述</label>
                                            <div class="col-md-6 col-sm-6">
                                                <!--<input type="text" id="ms_des" name="ms_des" class="form-control">-->
                                                <textarea name="ms_des" rows="3" cols="90" id="ms_des" name="ms_des" class="form-control"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 col-sm-2 control-label">模型描述图片</label>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                                        <img src="/images/noimg.png" alt="" />
                                                    </div>
                                                    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                                    <div>
                                                       <span class="btn btn-default btn-file">
                                                            <span class="fileupload-new"><i class="fa fa-paper-clip"></i> 选择图片</span>
                                                            <span class="fileupload-exists"><i class="fa fa-undo"></i> 更变</span>
                                                            <input id="file_img" name="ms_img" type="file" class="default"  accept=".png,.jpg" />
                                                       </span>
                                                        <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> 移除</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset title="步骤 4">
                                        <legend>模型服务文件</legend>
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                                <span class="btn btn-default btn-file">
                                                <span class="fileupload-new"><i class="fa fa-paper-clip"></i> 选择文件</span>
                                                <span class="fileupload-exists"><i class="fa fa-undo"></i> 更变</span>
                                                <input id="file_modelSer" name="file_model" type="file" class="default" accept=".zip,.rar" />
                                                </span>
                                            <span class="fileupload-preview" style="margin-left:5px;"></span>
                                            <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none; margin-left:5px;"></a>
                                            <br />
                                            <br />
                                        </div>
                                    </fieldset>
                                    <button id="btn_ok" name="btn_upload" type="submit" class="finish btn btn-info btn-extend" >提交</button>
                                </form>
                                <!--<span id="save_Status" style="display: inline;margin-left: 50px;"></span>-->
                                <div id="div_upload" style="display: none;">
                                    当前进度:
                                    <br />
                                    <div class="progress progress-striped active progress-sm">
                                        <div id="upload_bar" style="width: 0%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-success">
                                            <span class="sr-only">45% Complete</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <%- include footer.ejs %>
    </div>
</section>

<%- include footerInclude.ejs %>

<script src="/js/jquery.validate.min.js"></script>
<script src="/js/jquery.stepy.js"></script>

<!--file upload-->
<script type="text/javascript" src="/js/bootstrap-fileupload.min.js"></script>
<!--bootstrap input mask-->
<script type="text/javascript" src="/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

<script type="text/javascript">
    var fileFinish = false;
    var recordFinish = false;
    var oid = '';

    $(document).ready(function () {
        $('#stepy_form').stepy({
            backLabel: '上一步',
            nextLabel: '下一步',
            errorImage: true,
            block: false,
            description: true,
            legend: false,
            titleClick: true,
            titleTarget: '#top_tabby',
            validate: false,
            finishButton:true,
            finish: function() {
                $('#div_upload').css('display','block');
                var formdata = new FormData($('#stepy_form')[0]);
                $.ajax({
                    url : '/modelser/rmt/<%=host %>',
                    method : 'POST',
                    data : formdata,
                    processData : false,
                    contentType : false,
                    success : function (msg) {
                        msg = JSON.parse(msg);
                        if(msg.result == 'suc'){
                            oid = msg.data._id;
                            recordFinish = true;
                            if(fileFinish == true)
                            {
                                window.location.href = '/modelser/rmt/<%=host %>/' + oid;
                            }
                        }
                        else if(msg.result == 'err'){
                            msg = msg.message;
                            if(msg.status == 0)
                            {
                                //系统出错
                                alert('系统出错，请稍后重试！');
                            }
                            else if(msg.status == 1)
                            {
                                msg = msg.rst;
                                if(msg.isValidate){
                                }
                                else{
                                    //上传文件结构出错
                                    if(!msg.cfgfile){
                                        alert('模型不合法，缺少config文件！');
                                    }
                                    if(msg.cfg.length){
                                        var cfgerr = '';
                                        for(var i=0;i<msg.cfg.length;i++){
                                            cfgerr += msg.cfg[i];
                                            if(i != msg.cfg.length-1)
                                                cfgerr += ' ';
                                        }
                                        alert('config文件出错，可能与以下信息相关：\n'+ cfgerr);
                                    }
                                    else{
                                        if(!msg.mdl){
                                            alert('缺少mdl！');
                                        }
                                        else if(!msg.start){
                                            alert('缺少模型入口程序！');
                                        }
                                    }
                                }
                            }
                            else{
                                alert('未知错误!' + JSON.stringify(msg));
                            }
                        }
                    }
                });
                var fileInsterval = setInterval(function () {
                    $.ajax({
                        url : '/modelser/rmt/file/<%=host %>',
                        method:'GET',
                        success:function (data) {
                            var resJson = JSON.parse(data);
                            $('#upload_bar').css('width', resJson.value.toString() + '%')
                            if(resJson.value == 100)
                            {
                                fileFinish = true;
                                clearInterval(fileInsterval);
                                if(recordFinish == true)
                                {
                                    var newUrl;
                                    if($("#ms_limited").val() == 1){
                                        newUrl = '/modelser/rmt/all';
                                    }
                                    newUrl = '/modelser/rmt/<%=host %>/' + oid;
                                    window.location.href = newUrl;
                                }
                            }
                        }
                    });
                }, 300);
                return false;
            }
        });

        $('#stepy_form').validate({
            errorPlacement: function(error, element) {
                $('#stepy_form div.stepy-error').append(error);
            },
            rules: {
                u_name: 'required',
                u_email: 'required',
                m_name:'required',
                m_type:'required',
                mv_num:'required',
                ms_des:'required',
                ms_status:'required',
                file_model:'required'
            },
            messages: {
                u_name: {
                    required: '请填写上传者名称!'
                },
                u_email: {
                    required: '请填写上传者邮箱!',
                    email: '请输入合法邮箱地址!'
                },
                m_name: {
                    required: '请填写模型名称!'
                },
                m_type: {
                    required: '请填写模型类型!'
                },
                m_url: {
                    url: '请输入合法地址!'
                },
                mv_num: {
                    required: '请填写模型版本号!'
                },
                ms_des: {
                    required: '请填写模型描述信息!'
                },
                ms_status: {
                    required: '请填写模型服务状态!'
                },
                file_model: {
                    required: '请上传模型服务文件!'
                }
            }
        });
    });
</script>
</body>
</html>